<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="shopQuery">
                <el-form-item>
                    <el-input v-model="shopQuery.name" placeholder="姓名" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="loadData" size="small">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="shops" highlight-current-row v-loading="listLoading"
                  border stripe style="width: 100%;">
            <el-table-column type="index" width="60"></el-table-column>
            <el-table-column prop="logo" label="店铺LOGO" width="120" sortable></el-table-column>
            <el-table-column prop="name" label="店铺名称" width="120" sortable></el-table-column>
            <el-table-column prop="tel" label="联系电话" width="120" sortable></el-table-column>
            <el-table-column prop="address" label="店铺地址" width="220" sortable></el-table-column>
            <el-table-column prop="state" label="状态" width="100">
                <template scope="scope">
                    <b style="color: #d3241e;" v-if="scope.row.state==-1">禁用</b>
                    <b style="color: #12d30c;" v-else-if="scope.row.state==0">正常</b>
                    <b style="color: #09685c;" v-else-if="scope.row.state==1">待审核</b>
                    <b style="color: #ad1eb5;" v-else-if="scope.row.state==2">待激活</b>
                    <b style="color: #150cd3;" v-else>审核驳回</b>
                </template>
            </el-table-column>
            <el-table-column prop="registerTime" label="注册时间" min-width="180"></el-table-column>
            <el-table-column label="操作" width="150">
                <!--
                    slot-scope="scope"  表示将当前行的json对象封装到scope变量中
                        可以scope.row来获取当前行的json对象数据
                -->
                <template scope="scope">
                    <el-button size="small" type="warning" :disabled="scope.row.state!=1" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页工具条-->
        <el-col :span="24" class="toolbar">
            <!--
                el-pagination 是ElementUI的分页组件
                    layout 布局
                        sizes 每页行数的下拉框
                        prev 上一页按钮
                        next 下一页按钮
                        pager 每一页的快速链接
                        jumper 提供一个输入框，输入一个页码后按回车，直接跳到某一页
                        total 显示总行数
                    current-change 当当前页码发生改变时触发的事件，就是翻页
                    current-page 当前页码
                    page-size 每页行数
                    total 总行数：需要在当前组件中定义一个属性与之绑定，然后页面挂载完毕后加载数据的回调函数中给这个属性赋值
                        elementui就会自动计算总页数
                        总页数 = total%page-size == 0 ? total/page-size : total/page-size + 1
            -->
            <el-pagination layout="prev, pager, next, total" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--模态框-->
        <el-dialog title="商家入驻审核" v-model="dialogFormVisible" :close-on-click-modal="false">
            <el-form labelwidth="80px">
                <el-form-item label="部门名称">
                    <span>{{formData.name}}</span>
                </el-form-item>
                <el-form-item label="联系电话">
                    <span>{{formData.tel}}</span>
                </el-form-item>
                <el-form-item label="商家地址">
                    <span>{{formData.address}}</span>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-radio v-model="auditState" :label="1">审核通过</el-radio>
                    <el-radio v-model="auditState" :label="2">驳回</el-radio>
                    <el-radio v-model="auditState" :label="3">拒绝</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="submitAudit" :loading="submitLoading">审核</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    //import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

    export default {
        data() {
            return {
                shopQuery: {          //分页和高级查询的条件参数对象
                    name: '',
                    pageNo: 1,
                    pageSize: 10
                },
                shops: [],            //表格数据
                total: 0,                   //分页组件：总行数
                listLoading: false,         //表格数据加载状态
                dialogFormVisible: false,   //模态框界面是否显示
                submitLoading: false,       //表单提交状态
                formDataRules: {            //表单验证规则对象
                },
                //模态框表单界面数据
                formData: {
                    id: null,
                    name: '',
                    tel: '',
                    logo: '',
                    state: 1,
                    address: '',
                    registerTime: null,
                    admin_id: null
                },
                auditState: 1               //单选框审核状态
            }
        },
        methods: {
            //翻页事件：参数是翻页后的当前页码
            handleCurrentChange(val) {
                this.shopQuery.pageNo = val;
                this.loadData();        //使用这个json对象作为请求参数去查询数据
            },
            //获取部门列表
            loadData() {
                this.listLoading = true;        //表格正在加载数据
                //NProgress.start();            //启动进度条
                //发送ajax请求
                this.$http.patch("/shop", this.shopQuery).then(res => {
                    this.listLoading = false;       //表格加载数据完毕
                    //NProgress.done();         //停止进度条
                    this.shops = res.data.list    //给组件属性赋值即可自动展示数据
                    this.total = res.data.total
                })
            },
            //显示审核界面
            handleAudit: function (index, row) {
                this.dialogFormVisible = true;
                this.formData = Object.assign({}, row);
            },
            //提交审核表单
            submitAudit: function () {
                //NProgress.start();
                this.submitLoading = true;              //表单正在提交
                //发送请求
                this.$http.get("/shop/audit/"+this.formData.id+"/"+this.auditState).then(res => {
                    //NProgress.done();
                    this.submitLoading = false;         //表单提交完毕
                    let {success,msg} = res.data        //解构表达式
                    if(success){
                        this.$message.success(msg);
                        this.dialogFormVisible = false  //关闭模态框
                        this.loadData()                 //重新加载表格数据
                    }else{
                        this.$message.error(msg);
                    }
                })
            }
        },
        mounted() {
            this.loadData();
        }
    }

</script>

<style scoped>

</style>